<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text>收藏</text>
    </view>
    <view class="interact-container">
      <block v-for="(item,index) in interactInfo" :key="index">
        <interact-box :item='item' pid=1 @getInfo='getInfo()' @changeCollect="changeCollect($event)"
          @changeDianzan="changeDianzan($event)"></interact-box>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        page: 1,
        pagesize: 4,
        interactInfo: []
      };
    },
    onLoad() {
      this.getInfo()
    },
    onShow() {
      this.getInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getInfo() {
        const data = await uni.$http.post(`/users/post/page/myCollection/${this.userInfo.studentId}`, {
          page: this.page,
          pagesize: this.pagesize,
        })
        console.log(data.data.data.records);
        this.interactInfo = data.data.data.records
      },
      changeCollect(e) {
        const that = this
        this.interactInfo.forEach((item, index) => {
          if (item.postId == e.id) {
            that.interactInfo[index].collectionCount += e.count
            that.interactInfo[index].is_PostCollection += e.count
          }
        })
      },
      changeDianzan(e) {
        const that = this
        this.interactInfo.forEach((item, index) => {
          if (item.postId == e.id) {
            that.interactInfo[index].thumbsCount += e.count
            that.interactInfo[index].is_PostThumbs += e.count
          }
        })
      },
      preview(i) {
        uni.previewImage({
          current: i,
          urls: ['/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg',
            '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg'
          ]
        })
      },
      goInteractDetail() {
        uni.navigateTo({
          url: '/subpkg/interactDetail/interactDetail'
        })
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    },
    onReachBottom() {
      this.pagesize += 2
      this.getInfo()
    }
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;

    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .interact-container {}
</style>